<template>
  <div class="user-module" v-loading="loading">
    <div class="user-title">用户管理</div>
    <div class="user-content">
      <div class="btn">
        <el-button size="small" type="primary" @click="clickAddUser">
          添加用户
        </el-button>
        <el-input
          placeholder="请输入名称进行查找"
          suffix-icon="el-icon-search"
          @change="changeSearchName"
          v-model="pageData.username"
        ></el-input>
      </div>
      <el-table :data="data" :height="maxheight">
        <el-table-column prop="username" label="用户名称">
          <template slot-scope="{ row }">
            {{ row.username || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间">
          <template slot-scope="{ row }">
            {{ row.createdTime || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedTime" label="更改时间">
          <template slot-scope="{ row }">
            {{ row.updatedTime || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="createdUser" label="创建人">
          <template slot-scope="{ row }">
            {{ row.createdUser || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedUser" label="更改人">
          <template slot-scope="{ row }">
            {{ row.updatedUser || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row }">
            <el-button type="text" @click="editUser(row)">编辑</el-button>
            <el-button
              type="text"
              @click="changeDel(row)"
              :disabled="row.username == 'admin'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 24px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="pageData.total"
      >
      </el-pagination>
    </div>
    <user-dialog
      :title="title"
      :form="form"
      :userDialog="userDialog"
      @handleClose="handleClose"
    ></user-dialog>
  </div>
</template>
<script>
import UserDialog from "./component/UserDialog.vue";
import { getuserList, userDellData } from "../../api/api";
export default {
  components: { UserDialog },
  data() {
    return {
      maxheight: "calc(100vh - 288px)",
      loading: false,
      userDialog: false,
      title: "add",
      data: [],
      pageData: {
        total: 0,
        page: 1,
        pageSize: 10,
        username: "",
      },
      form: {},
    };
  },
  methods: {
    clickAddUser() {
      this.userDialog = true;
      this.form = {
        id: "",
        username: "",
        password: "",
      };
      this.title = "add";
    },
    editUser(row) {
      this.userDialog = true;
      this.form = {
        id: row.id,
        username: row.username,
        password: "",
      };
      this.title = "edit";
    },
    handleClose() {
      this.userDialog = false;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.pageData.page = 1;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageData.page = val;
      this.getData();
    },
    changeSearchName() {
      this.pageData.page = 1;
      this.getData();
    },
    getData() {
      const list = {
        page: this.pageData.page,
        size: this.pageData.pageSize,
        username: this.pageData.username,
      };
      this.loading = true;
      getuserList(list)
        .then((res) => {
          const { code, data, msg } = res.data;
          if (code == 200) {
            this.data = data.records;
            this.pageData.total = data.total;
          } else {
            this.$message.error(msg);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
          this.loading = false;
        });
    },
    changeDel(row) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          userDellData(row.id)
            .then((res) => {
              const { code, msg } = res.data;
              if (code == 200) {
                this.getData();
                this.$message.success(msg);
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
              this.loading = false;
            });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.user-module {
  .user-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    :deep(.el-input) {
      width: 320px;
    }
  }
}
</style>
